<template>
    <div class="info-box" style="height: 300px;">
        <div style="margin-left: 28%;">
            <a-avatar shape="square" :size="100">
                <img alt="avatar" :src="$store.state.user.picture" />
            </a-avatar>
        </div>

        <div class="username">{{ $store.state.user.username }}</div>
        <a-divider />
        <div style="margin-left: 20%;">
            <div class="user-data-box">
                <div class="user-data-digit" style="display: flex;">
                    <div class="item">{{ $store.state.user.subscribes }}</div>
                    <div class="item">{{ $store.state.user.followers }}</div>
                    <div class="item">{{ $store.state.user.articleCount }}</div>
                </div>

                <div class="user-data-title" style="display: flex;">
                    <div class="item">关注</div>
                    <div class="item">粉丝</div>
                    <div class="item">帖子</div>
                </div>
            </div>
        </div>
        <a-divider />
    </div>


    <!-- Info的选项栏 -->
    <a-card v-for="tab in selectors " :key="tab.id" hoverable :bordered="false" @click="goto(tab.url)"
        :style="{ width: '350px', marginBottom: '20px', paddingLeft: '30px' }">
        <div :style="{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
        }">
            <span :style="{ display: 'flex', alignItems: 'center', color: '#1D2129', }">
                <img :src="tab.icon" alt="icon" style="width: 30px;">
                <div style="margin-left: 20px;"> <a-typography-text> {{ tab.name }} </a-typography-text></div>
            </span>
            <a-link>
                <IconRight :size="32" />
            </a-link>
        </div>
    </a-card>
</template>

<script>

import {
    IconRight,
} from '@arco-design/web-vue/es/icon';
import router from '@/router'
import { useStore } from 'vuex';
import { Message } from '@arco-design/web-vue';

export default {
    components: {
        IconRight,
    },
    data() {
        return {
            selectors: [
                {
                    icon: require('@/assets/icons/customer.png'),
                    name: "个人中心",
                    url: "PersonalConfig",
                },
                {
                    icon: require('@/assets/icons/post.png'),
                    name: "我要发贴",
                    url: "PostArticleConfig",
                },
                {
                    icon: require('@/assets/icons/favorites-fill.png'),
                    name: "我的收藏",
                    url: "PersonalStars",
                },
                {
                    icon: require('@/assets/icons/message-comments.png'),
                    name: "我的私信",
                    url: "PersonalMessage",
                },
                {
                    icon: require('@/assets/icons/message-comments.png'),
                    name: "我的文章",
                    url: "PersonalMessage",
                }
            ]
        }
    },
    setup() {
        const store = useStore();

        const goto = (url) => {
            // 路由跳转拦截器
            const isLogined = store.state.user.is_login;
            // const isLogined = true;
            if (!isLogined) {
                console.log(isLogined)
                router.push({ name: "UserLoginView" })
                Message.error({ content: `请登录后查看!`, showIcon: true })
                return;
            }

            router.push({ name: url });
        }

        return {
            goto
        }
    }
}
</script>

<style scoped>
.username {
    font-size: 26px;
    font-weight: bolder;
    margin-top: 12px;
    text-align: center;
    padding-right: 40px;
}

.info-box {
    padding-left: 50px;
    /* 默认偏移量 */
}

.item {
    margin: 6px 5% 2px 5%;
    width: 15%;
    text-align: center;
}
</style>